<template>
  <div>
    <el-row class="login-container">
      <el-col :span="12" class="login-left"></el-col>
      <el-col :span="12" class="login-right">
        <el-card class="login-form-card">
          <el-tabs @tab-change="tabsSwitch" v-model="avtiveName" :stretch="true" class="tabs">
            <el-tab-pane label="登录" name="login">
              <!-- 登录表单 -->
              <el-form
                :rules="loginRules"
                :model="loginform"
                ref="loginformRef"
                label-width="70px"
                class="login-form"
              >
                <el-form-item prop="account" label="账号">
                  <el-input v-model="loginform.account" placeholder="请输入账号"></el-input>
                </el-form-item>
                <el-form-item prop="password" label="密码">
                  <el-input
                    type="password"
                    v-model="loginform.password"
                    placeholder="请输入密码"
                  ></el-input>
                </el-form-item>
              </el-form>
              <div class="form-footer">
                <div class="footer-password">
                  <span @click="openForgetDialog">忘记密码</span>
                </div>
                <div class="footer-submit">
                  <el-button class="btn" type="primary" size="default" @click="loginSubmit"
                    >登录</el-button
                  >
                </div>
                <div class="footer-register">
                  还没有账号?<span @click="avtiveName = 'register'">立即注册</span>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="注册" name="register"
              ><!-- 登录表单 -->
              <el-form
                :model="registerForm"
                :rules="registerRules"
                ref="registerformRef"
                label-width="70px"
                class="login-form"
              >
                <el-form-item prop="account" label="账号">
                  <el-input v-model="registerForm.account" placeholder="请输入账号"></el-input>
                </el-form-item>
                <el-form-item prop="password" label="密码">
                  <el-input
                    type="password"
                    v-model="registerForm.password"
                    placeholder="请输入密码"
                  ></el-input>
                </el-form-item>
                <el-form-item prop="repPassword" label="确认密码">
                  <el-input
                    type="password"
                    v-model="registerForm.repPassword"
                    placeholder="确认您的密码"
                  ></el-input>
                </el-form-item>
              </el-form>
              <div class="form-footer">
                <div class="footer-submit">
                  <el-button class="btn" type="primary" size="default" @click="registerSubmit"
                    >注册</el-button
                  >
                </div>
              </div></el-tab-pane
            >
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
    <!-- 密码弹窗 -->
    <forget ref="forgetRef"></forget>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import forget from './component/forgetPassword.vue'
import { registerAPI } from '@/api/login'
import { ElMessage, type FormRules } from 'element-plus'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { useMenuStore } from '@/stores/menu'

const menuStore = useMenuStore()

const userStore = useUserStore()

const forgetRef = ref()
const router = useRouter()
/** 登录表单实例 */
const loginformRef = ref()
/** 注册实例 */
const registerformRef = ref()
/** tab卡片 */
const avtiveName = ref<'login' | 'register'>('login')
/** 登录数据 */
const loginform = reactive<LoginForm>({
  account: null,
  password: ''
})
/** 注册数据 */
const registerForm = reactive<LoginForm>({
  account: null,
  password: '',
  repPassword: ''
})
// 自定义校验规则
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请确认您的新密码'))
  } else if (value !== registerForm.password) {
    callback(new Error('两次密码输入不一致'))
  } else {
    callback()
  }
}
// 登录校验规则
const loginRules = reactive<FormRules<LoginForm>>({
  account: [
    { required: true, message: '请输入您的账号', trigger: 'blur' },
    { min: 6, max: 12, message: '账号必须是6-12位的数字', trigger: 'blur' }
  ],
  password: [{ required: true, message: '请输入您的密码', trigger: 'blur' }]
})
// 注册校验规则
const registerRules = reactive<FormRules<LoginForm>>({
  account: [
    { required: true, message: '请输入您的账号', trigger: 'blur' },
    { min: 6, max: 12, message: '账号必须是6-12位的数字', trigger: 'blur' }
  ],
  password: [{ required: true, message: '请输入您的密码', trigger: 'blur' }],
  repPassword: [{ validator: validatePass2, trigger: 'blur' }]
})
// 忘记密码回调
const openForgetDialog = () => {
  forgetRef.value.open()
}
// 登录回调
const loginSubmit = async () => {
  await loginformRef.value.validate()
  const res = await userStore.login(loginform.account!, loginform.password!)
  await userStore.getUserInfo(res)
  await menuStore.setRouter()
  router.push('/')
  ElMessage({ type: 'success', message: '登陆成功' })
} // 注册回调
const registerSubmit = async () => {
  await registerformRef.value.validate()
  await registerAPI(registerForm)
  avtiveName.value = 'login'
}
// tab改变时清空form
const tabsSwitch = () => {
  loginformRef.value?.resetFields()
  registerformRef.value?.resetFields()
}

if (menuStore.menuRoutes.length > 0) {
  location.reload()
}
</script>

<style scoped lang="scss">
.login-container {
  width: 100%;
  height: 100vh;

  .login-left {
    background: url('@/assets/images/login_back.png') no-repeat;
    background-size: 100% 105%;
  }

  .login-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .login-form-card {
      width: 400px;
      height: 350px;

      .login-form {
        padding: 20px 5px 0;
      }
    }
    .form-footer {
      display: flex;
      flex-direction: column;
      flex: 1;
      .footer-password {
        padding-right: 25px;
        font-size: 14px;
        text-align: right;
        color: #409eff;
        cursor: pointer;
      }
      .footer-submit {
        display: flex;
        justify-content: center;
        button {
          width: 100%;
          height: 35px;
          border: 0;
          margin: 20px 0;
          width: 80%;
        }
      }
      .footer-register {
        text-align: center;
        font-size: 15px;
        span {
          color: #409eff;
          cursor: pointer;
        }
      }
    }
  }
}
.el-form {
  .el-input {
    margin-right: 20px;
  }
}
</style>
